<template>
    <div class="top-view">
        <!-- gutter表示el-col之间的间距 -->
        <el-row :gutter="20">
            <!-- 一行的总长度是24,这里一列占6 -->
            <el-col :span="6">  
                <el-card shadow="hover">
                    <total-sales/>
                </el-card>
            </el-col>
            <el-col  :span="6">
                <el-card shadow="hover">
                    <total-orders/>
                </el-card>
            </el-col>
            <el-col  :span="6">
                <el-card shadow="hover">
                    <today-users/>
                </el-card>
            </el-col>
            <el-col  :span="6">
                <el-card shadow="hover">
                    <total-users/>
                </el-card>
            </el-col>
        </el-row>
        
       
    </div>
</template>

<script>
import TotalSales from '../TotalSales'
import TotalOrders from '../TotalOrders'
import TotalUsers from '../TotalUsers'
import TodayUsers from '../TodayUsers'
export default {
    components: { 
      TotalSales,
      TotalOrders,
      TotalUsers,
      TodayUsers
    },
    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="scss" scoped>

</style>